Component({
  /**
   * 组件的属性列表
   */
  properties: {
    avatarUncropped: {
      type: String,
      value: '',
    },
  },
  observers: {
    avatarUncropped: function(newVal) {
      if (newVal) {
        wx.nextTick(() => {
          this.cropper = this.selectComponent('#image-cropper');
          this.setData({
            src: newVal,
          });
        });
      }
    },
  },
  /**
   * 组件的初始数据
   */
  data: {
    src: '',
    width: 250, //宽度
    height: 250, //高度
    max_width: 300,
    max_height: 300,
    disable_rotate: true, //是否禁用旋转
    disable_ratio: false, //锁定比例
    limit_move: true, //是否限制移动
  },
  lifetimes: {
    attached() {},
  },
  /**
   * 组件的方法列表
   */
  methods: {
    cropperload(e) {
      console.log('cropper加载完成');
    },
    loadimage(e) {
      wx.hideLoading();
      console.log('图片');
      this.cropper.imgReset();
    },
    clickcut(e) {
      console.log(e.detail);
      //图片预览
      wx.previewImage({
        current: e.detail.url, // 当前显示图片的http链接
        urls: [e.detail.url], // 需要预览的图片http链接列表
      });
    },
    cancelCropper() {
      this.triggerEvent('cancelEvent');
    },
    confirmCropper() {
      this.cropper.getImg(obj => {
        this.triggerEvent('confirmEvent', obj.url);
      });
    },
    rotate() {
      //在用户旋转的基础上旋转90°
      this.cropper.setAngle((this.cropper.data.angle += 90));
    },
  },
});
